<script setup>
import { ref, watch, computed } from 'vue'
import { listBusinessForMemberService, refundBusinessCarService } from '@/api/business.js'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 下拉刷新
const refreshLoading = ref(false)

// 业务状态
const businessStatus = ref(route.query.businessStatus)
const tabs = ['待接单', '进行中', '已完成', '已退款']
// 激活的tab索引
const active = computed({
  get() {
    return tabs.indexOf(businessStatus.value)
  },
  set(newValue) {
    businessStatus.value = tabs[newValue]
  }
})

const businessList = ref()

// 获取业务列表
const listBusiness = async () => {
  const res = await listBusinessForMemberService(businessStatus.value)
  businessList.value = res.data.data
  refreshLoading.value = false
}
listBusiness()

// 监听active变化时，重新获取业务列表
watch(active, (newValue) => {
  businessStatus.value = tabs[newValue]
  listBusiness()
})

// 业务退款
const refundBusiness = async (businessId) => {
  showDialog({
    title: '确认退款',
    message: '确定要退款该服务吗？',
    showConfirmButton: true,
    showCancelButton: true
  }).then(async () => {
    await refundBusinessCarService(businessId)
    showNotify({
      type: 'success',
      message: '退款成功'
    })
    listBusiness()
  })
}
</script>

<template>
  <div class="business-manage">
    <van-nav-bar title="我的业务" left-text="返回" left-arrow @click-left="$router.back()" fixed />
    <van-pull-refresh v-model="refreshLoading" @refresh="listBusiness" success-text="加载成功">
      <div class="user-business">
        <van-tabs v-model:active="active" sticky offset-top="46px">
          <van-tab v-for="tab in tabs" :key="tab" :title="tab">
            <div class="business-list">
              <van-empty v-if="!businessList?.length" image="search" description="无业务记录" />
              <div v-for="business in businessList" :key="business.id" class="business-card">
                <div class="business-header">
                  <span class="business-time">{{ business.createTime }}</span>
                  <span>{{ business.status }}</span>
                </div>

                <div class="business-info">
                  <van-field
                    label="服务名称："
                    label-width="70"
                    v-model="business.projectName"
                    :border="false"
                    readonly
                    style="padding: 2px"
                  />
                  <van-field
                    label="车牌号："
                    label-width="70"
                    v-model="business.carPlateNumber"
                    :border="false"
                    readonly
                    style="padding: 2px"
                  />
                  <van-field
                    v-if="business.employeeName"
                    label="服务员工："
                    label-width="70"
                    v-model="business.employeeName"
                    :border="false"
                    readonly
                    style="padding: 2px"
                  />
                  <van-field
                    v-if="businessStatus === '已完成'"
                    label="完成时间："
                    label-width="70"
                    v-model="business.updateTime"
                    :border="false"
                    readonly
                    style="padding: 2px"
                  />
                </div>

                <div class="business-footer">
                  <div class="payable-amount">
                    实付金额：
                    <span class="amount">¥{{ (business.payableAmount / 100).toFixed(2) }}</span>
                  </div>
                  <div class="pay-method">
                    付款方式：
                    <span class="method">{{ business.payMethod }}</span>
                  </div>
                  <van-button
                    v-if="businessStatus === '待接单'"
                    size="small"
                    type="danger"
                    @click="refundBusiness(business.id)"
                  >
                    退款
                  </van-button>
                  <van-button
                    v-if="businessStatus === '已完成'"
                    size="small"
                    type="primary"
                    @click="router.push('/user/feedback')"
                  >
                    去评价
                  </van-button>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-pull-refresh>
  </div>
</template>

<style lang="scss" scoped>
.business-manage {
  padding-top: 46px;
  background-color: #f7f8fa;
  min-height: 100vh;

  .user-business {
    height: 100%;

    .business-list {
      padding: 12px;

      .business-card {
        background: #fff;
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 16px;

        .business-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
          padding-bottom: 6px;
          border-bottom: 1px solid #f5f5f5;

          .business-time {
            color: #666;
            font-size: 14px;
          }
        }

        .business-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .business-price {
            color: #ee0a24;
            font-size: 14px;
          }
        }

        .business-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 6px;
          padding-top: 6px;
          border-top: 1px solid #f5f5f5;

          .payable-amount {
            color: #323233;
            font-size: 14px;

            .amount {
              color: #ee0a24;
              font-weight: 500;
            }
          }

          .pay-method {
            color: #323233;
            font-size: 14px;

            .method {
              color: #ee0a24;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>
